<template>
  <div class="page">
    <Card title="巡检统计">
      <textNum :data="xunjianData"></textNum>
    </Card>
    <Card title="巡检任务">
      <PieVue ref="xjrwtj"></PieVue>
    </Card>

    <Table
      ref="yhtable"
      title="巡检隐患列表"
      :headers="['计划名称', '巡检人员', '巡检时间']"
      :propsData="['planName', 'checkUserName', 'checkTime']"
      :limitScrollNum="11"
    ></Table>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { xjNum, apis, xjrwtj, fxyhxjjl } from "@/api/threeD.js";
import Table from "../components/table.vue";
import textNum from "../echarts/textNum.vue";

import {
  MonitoringPoints,
  HiddenDangerInvestigation,
  // RiskStatistics,
  ActionBtns,
  Card,
} from "../components/index.js";
import Button from "../components/button.vue";
import PieVue from "../echarts/pie.vue";

export default defineComponent({
  name: "RightMenu",
  components: {
    MonitoringPoints,
    HiddenDangerInvestigation,
    // RiskStatistics,
    ActionBtns,
    Table,
    Button,
    Card,
    textNum,
    PieVue,
  },
  data() {
    return {
      height: 260,
      xunjianData: [],
    };
  },
  methods: {
    handleClick(type) {
      apis[type]();
    },
  },
  mounted() {
    xjNum().then((res) => {
      this.xunjianData = res.data;
    });

    xjrwtj().then((res) => {
      let total = 0;
      Object.keys(res.data).forEach((item) => {
        total += res.data[item];
      });
      this.$refs.xjrwtj.setData({
        data: Object.keys(res.data).map((item) => {
          return { name: item, value: res.data[item] };
        }),
        color: ["#10F3A7", "#FF5F55"],
        total,
        center: "巡检任务总数",
      });
    });

    fxyhxjjl().then((res) => {
      this.$refs.yhtable.setData(res.rows);
    });
  },
});
</script>

<style lang="scss" scoped>
.button {
  margin-top: 10px;
}
.cardBox {
  width: 300px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.page {
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  width: 418px;
  height: 934px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  color: #fff;
}
</style>
